import SEO from "../components/SEO";
import { TOC, TOCList, TOCLink } from "../components/TOC";

<SEO
	title="Window Size"
	description="Measure the current window dimensions in React"
/>

# Window Size

<TOC>
	<TOCList>
		<TOCLink href="#usewindowsize">useWindowSize</TOCLink>
		<TOCLink href="#windowsize">WindowSize</TOCLink>
	</TOCList>
</TOC>

Measure the current window dimensions.

## Installation

From the command line in your project directory, run `npm install @reach/window-size` or `yarn add @reach/window-size`. Then import the component or hook that you need:

```bash
npm install @reach/window-size
# or
yarn add @reach/window-size
```

```js
import WindowSize, { useWindowSize } from "@reach/window-size";
```

## Component API

### WindowSize

```jsx
// jsx-demo
function Example() {
	return (
		<WindowSize>
			{(size) => (
				<div>
					<p>Resize your window.</p>
					<pre>{JSON.stringify(size, null, 2)}</pre>
				</div>
			)}
		</WindowSize>
	);
}
```

#### WindowSize Props

| Prop                    | Type   | Required |
| ----------------------- | ------ | -------- |
| [`children`](#children) | `func` | true     |

##### WindowSize `children`

`children: (size: { width: number; height: number }) => React.ReactElement<any, any>`

A function that calls back to you with the window size.

### `useWindowSize`

A hook that observes and returns the measurements of the browser window.

```jsx
// jsx-demo
function Example() {
	const { width, height } = useWindowSize();
	return (
		<div>
			<p>Resize your window.</p>
			<pre>Window size: {JSON.stringify({ width, height }, null, 2)}</pre>
		</div>
	);
}
```

#### `useWindowSize` signature

```ts
function useWindowSize(): {
	width: number;
	height: number;
};
```
